(()=>{
      var myChart = echarts.init(document.getElementById('main4'));
        var option = {
            grid: {
                left: '50%'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                left: 'center',
            },
            xAxis: {
                type: 'category',
                data: [
                    { value: '搜索引擎' },
                    { value: '直接访问' },
                    { value: '邮件营销' },
                    { value: '联盟广告' },
                    { value: '视频广告' }
                ]

            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    center: ['25%', '40%'],
                    data: [
                        { value: 120, name: '搜索引擎', itemStyle: { color: 'red' } },
                        { value: 20, name: '直接访问', itemStyle: { color: '#bfa' } },
                        { value: 150, name: '邮件营销', itemStyle: { color: '#E8A5ED' } },
                        { value: 80, name: '联盟广告', itemStyle: { color: '#CBF764' } },
                        { value: 70, name: '视频广告', itemStyle: { color: '#64CEF7' } }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    type: 'bar',
                    left: '50%',
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: '#dcf'
                    },
                    data: [
                        { value: 120, name: '搜索引擎', itemStyle: { color: 'red' } },
                        { value: 20, name: '直接访问', itemStyle: { color: '#bfa' } },
                        { value: 150, name: '邮件营销', itemStyle: { color: '#E8A5ED' } },
                        { value: 80, name: '联盟广告', itemStyle: { color: '#CBF764' } },
                        { value: 70, name: '视频广告', itemStyle: { color: 'rgba(0,0,0,0)' } }
                    ]
                }
            ]
        };
        myChart.setOption(option)
        //保存按下的对象的所有数组
        let valueObj
        //将按下的data对象的索引保存起来
        let initDataIndex
        //图形的颜色盘
        let colorArr = ['red', '#bfa', '#E8A5ED', '#CBF764', '#64CEF7']
        myChart.on('mousedown', 'series', function (params) {
            let { data, dataIndex, seriesIndex } = params
            initDataIndex = dataIndex
            if (seriesIndex) {
                console.log(data)
                //按下是柱状图
                //判断data是否为对象，不为对象取其本身,为对象取是value值
                valueObj = { value: data instanceof Object ? data.value : data, name: params.name, itemStyle: { color: colorArr[dataIndex] } }
                option.series[seriesIndex].data[dataIndex] = {
                    value: data instanceof Object ? data.value : data,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)'
                    }
                }
            } else {
                //饼状图
                valueObj = data
                option.series[seriesIndex].data.splice(dataIndex, 1)
            }
            myChart.setOption(option)
        })
        myChart.on('mouseup', 'series', function (params) {
            let { data, dataIndex, seriesIndex } = params
            if (seriesIndex) {
                //松开时是柱状图
                option.series[seriesIndex].data.some(item => item.itemStyle.color === valueObj.itemStyle.color) ? '' : option.series[seriesIndex].data[dataIndex] = valueObj
                
            } else {
                //饼状图
                //从柱状图按住拖拽到饼状图，判断饼状图中是否已经有同名同值的数据，有则不添加到饼状图将其返回柱状图,反之添加到饼状图
                option.series[seriesIndex].data.some(item => item.value == valueObj.value && item.name === item.name) ? option.series[1].data[initDataIndex] = valueObj : option.series[seriesIndex].data.push(valueObj)
            }
            myChart.setOption(option)
        })
})()